<script>
export default{
	props:{
		api:{
			type:Object,
			default(){
				return {}
			}
		},//api
		num:{
			type:Number,
			default:1
		},//上传限制数量
		fileup:{
			type:Object,
			default(){
				return {
					file:{},
					filelist:[],
				}
			}
		},//控件上传列表
		move:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			loading:false,//图片上传中
			previewVisible:false,
			previewImage:'',
		}
	},
	created(){

	},
	methods:{
		beforeUpload(file,fileList){
			console.log('beforeUpload',file,fileList)
			console.log(fileList.length,this.fileup.filelist.length);

			const isimg = file.type === 'image/jpeg' || file.type === 'image/png';
			// if (!isimg) {
			// 	fileList.splice(0,1)
			// 	this.$message.error('You can only upload JPG file!',0);
			// }
			// const isLt2M = file.size / 1024 / 1024 < 2;
			// if (!isLt2M) {
			// 	fileList.splice(0,1)
			// 	this.$message.error('Image must smaller than 2MB!');
			// }
			// return isimg && isLt2M;
			return true;
		},//
		handleChange(info){
			console.log('info',info.file.status,info)
			if (info.file.status === 'uploading') {
				this.loading = true;
				return;
			}
			if (info.file.status === 'done') {
				this.$emit('done',info.file.response.path);
				this.loading = false;
			}
			if (info.file.status === 'error') {
				this.loading = false;
				this.$message.error(info.file.response.msg||'上传失败，请稍后重试');
			}
		},
		urlList(){
			let arr = [];
			this.fileup.filelist.forEach(item => {
                if(item.response?.url){
                    arr.push({
                        path:item.response?.url,
                        type:item.response?.ext=='mp4'?3:2
                    });
                }
			});
			console.log(this.fileup.filelist,arr)
			return arr;
		},
	}
}
</script>
<template>
	<div class="imgupbase" :class="{showmove:move}">
        <a-upload-dragger
            v-model:fileList="fileup.filelist"
            name="file"
            :multiple="true"
            :action="muajax.inst.defaults.baseURL+api.url"
			:data="{marketid:$store.state.user.market}"
			:before-upload="beforeUpload"
			@change="handleChange"
        >
            <p class="ant-upload-drag-icon">
            <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">点击或将文件拖至此处上传</p>
            <p class="ant-upload-hint"> 支持单个或批量上传，支持：png，jpg，jpeg，bmp，mp4格式文件 </p>
        </a-upload-dragger>
		<!-- <a-upload
			:multiple="num>1"
			v-model:fileList="fileup.filelist"
			list-type="picture-card"
			class="avatar-uploader"
			:action="muajax.inst.defaults.baseURL+api.url"
			:data="{marketid:$store.state.user.market}"
			:before-upload="beforeUpload"
			@change="handleChange"
			@preview="file=>{ previewImage=file.response?.url||file.url; previewVisible=true }"
			:remove="file=>$emit('del',file)"
		>

			<div v-if="fileup.filelist.length < num" :disabled="loading">
				<loading-outlined v-if="loading"></loading-outlined>
				<plus-outlined v-else></plus-outlined>
				<div class="ant-upload-text">Upload</div>
			</div>
		</a-upload> -->
		<a-modal :visible="previewVisible" :footer="null" @cancel="()=>previewVisible=false">
			<img alt="example" style="width: 100%" :src="previewImage" />
		</a-modal>
	</div>
</template>
<style lang="less" scoped>

</style>